<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <textarea placeholder="在这里输入你的评论，最多120字" v-model="msg" @click="postComment"></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in commentList" :key="item.add_time">
                <div class="cmt-title">
                    第{{ i+1 }}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dataFormat('YYYY-MM-DD') }}
                </div>
                <div class="cmt-body">
                    {{ item.content == 'undefined' ? '这个用户很懒，什么都没有留下' : item.content }}
                </div>
            </div>
        </div>

        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    export default {
        name: "comment.vue",
        data(){
            return {
                pageindex: 1,
                commentList:[],
                msg:''
            }
        },
        created(){
            this.getComments();
        },
        methods:{
            getComments(){
                this.$axios.get("/api/getcomments/"+this.id+"?pageindex="+this.pageindex).then(result=>{
                    // console.log(result)
                    if(result.data.status === 0){
                        if(result.data.message.length > 0){
                            //用老数据拼接上新的数据
                            this.commentList = this.commentList.concat(result.data.message);
                        }else{
                            Toast("无更多数据！")
                        }
                    }
                    else{
                        Toast("请求失败")
                    }
                })
            },
            getMore(){
                this.pageindex++;
                this.getComments()
            },
            postComment(){
                //校验提交数据的有效性
                if(this.msg.trim() === ''){
                    return Toast("评论不能为空")
                }
                if(this.msg.trim().length > 120){
                    return Toast("评论字不能超过120字")
                }

                this.$axios.post('/api/postcomment/'+this.id, {
                    content: this.msg
                }).then(result=>{
                    let res = result.data;
                    if(res.status === 0){
                        var cmt = {
                            user_name:'匿名用户',
                            add_time: Date.now(),
                            content: this.msg
                        };
                        this.commentList.unshift(cmt);
                        this.msg = '';
                    }else{
                        Toast("提交失败")
                    }

                })
            }
        },
        props:[
            "id"
        ]
    }
</script>

<style lang="scss" scoped>
.cmt-container {
    padding-bottom: 20px;
    h3 {
        font: 600 16px/32px "";
        color: #333;
        border-bottom: 1px solid #ccc;
    }
    textarea, button {
        font-size: 14px;
    }
    .cmt-list {
        margin-top: 10px;
        font-size: 14px;
        .cmt-item {
            margin-top: 10px;
            .cmt-title {
                padding: 5px;
                background: #8f8f94;
                color:#333;
            }
            .cmt-body {
                padding: 5px;
            }
        }
    }
}
</style>
